<template>
  <view class="checkin-history-container">
    <view class="header-section">
      <text class="page-title">签到记录</text>
    </view>
    
    <view class="filter-section">
      <view class="date-filter">
        <picker mode="date" :value="startDate" @change="onStartDateChange">
          <view class="picker">
            {{ startDate }}
          </view>
        </picker>
        <text class="divider">至</text>
        <picker mode="date" :value="endDate" @change="onEndDateChange">
          <view class="picker">
            {{ endDate }}
          </view>
        </picker>
      </view>
      <button class="filter-button" @click="filterRecords">筛选</button>
    </view>
    
    <view class="stats-section">
      <view class="stat-item">
        <text class="stat-label">总签到</text>
        <text class="stat-value">{{ stats.total }}</text>
      </view>
      <view class="stat-item">
        <text class="stat-label">本月</text>
        <text class="stat-value">{{ stats.thisMonth }}</text>
      </view>
      <view class="stat-item">
        <text class="stat-label">连续</text>
        <text class="stat-value">{{ stats.consecutive }}</text>
      </view>
    </view>
    
    <view class="history-list">
      <view class="history-item" v-for="record in filteredRecords" :key="record.id">
        <view class="record-date">
          <text class="date">{{ record.date }}</text>
          <text class="day">{{ record.day }}</text>
        </view>
        <view class="record-details">
          <view class="time-section">
            <text class="checkin-time">签到：{{ record.checkInTime }}</text>
            <text class="checkout-time" v-if="record.checkOutTime">签退：{{ record.checkOutTime }}</text>
          </view>
          <view class="duration" v-if="record.duration">
            <text>时长：{{ record.duration }}分钟</text>
          </view>
        </view>
      </view>
    </view>
    
    <view class="empty-state" v-if="filteredRecords.length === 0">
      <text class="empty-text">暂无签到记录</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { checkinApi } from '../../src/services/api'

// 筛选日期
const startDate = ref('2025-10-01')
const endDate = ref('2025-10-31')

// 统计数据
const stats = ref({
  total: 25,
  thisMonth: 8,
  consecutive: 3
})

// 签到记录
const checkinRecords = ref([
  {
    id: 1,
    date: '2025-10-28',
    day: '星期二',
    checkInTime: '08:30',
    checkOutTime: '10:15',
    duration: 105
  },
  {
    id: 2,
    date: '2025-10-27',
    day: '星期一',
    checkInTime: '08:45',
    checkOutTime: '09:45',
    duration: 60
  },
  {
    id: 3,
    date: '2025-10-26',
    day: '星期日',
    checkInTime: '09:00',
    checkOutTime: '10:30',
    duration: 90
  },
  {
    id: 4,
    date: '2025-10-25',
    day: '星期六',
    checkInTime: '08:20',
    checkOutTime: '09:50',
    duration: 90
  },
  {
    id: 5,
    date: '2025-10-24',
    day: '星期五',
    checkInTime: '08:35',
    checkOutTime: '09:45',
    duration: 70
  }
])

// 筛选后的记录
const filteredRecords = ref([...checkinRecords.value])

// 页面加载时获取签到记录
onMounted(() => {
  fetchCheckinRecords()
})

// 获取签到记录
const fetchCheckinRecords = async () => {
  try {
    // 这里应该调用获取签到记录的API
    // const response: any = await checkinApi.getMyCheckins()
    // checkinRecords.value = response.data
    // filteredRecords.value = [...checkinRecords.value]
    console.log('获取签到记录')
  } catch (error) {
    console.error('获取签到记录失败:', error)
    uni.showToast({
      title: '获取签到记录失败',
      icon: 'none'
    })
  }
}

// 开始日期变化
const onStartDateChange = (e: any) => {
  startDate.value = e.detail.value
}

// 结束日期变化
const onEndDateChange = (e: any) => {
  endDate.value = e.detail.value
}

// 筛选记录
const filterRecords = () => {
  // 这里应该根据日期筛选记录
  // 现在只是演示，直接使用所有记录
  filteredRecords.value = [...checkinRecords.value]
  uni.showToast({
    title: '筛选成功',
    icon: 'success'
  })
}
</script>

<style lang="scss" scoped>
.checkin-history-container {
  min-height: 100vh;
  background-color: #FFFFFF;
  padding: 20rpx;
}

.header-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  
  .page-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    text-align: center;
  }
}

.filter-section {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.date-filter {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.picker {
  background-color: #f5f5f5;
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
}

.divider {
  font-size: 28rpx;
  color: #666;
}

.filter-button {
  background-color: #4B0082;
  color: #fff;
  border: none;
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
}

.stats-section {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-around;
}

.stat-item {
  text-align: center;
}

.stat-label {
  font-size: 24rpx;
  color: #999;
  display: block;
  margin-bottom: 10rpx;
}

.stat-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #4B0082;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.history-item {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  display: flex;
}

.record-date {
  width: 120rpx;
  text-align: center;
  margin-right: 20rpx;
  border-right: 1rpx solid #eee;
}

.date {
  font-size: 28rpx;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.day {
  font-size: 24rpx;
  color: #999;
}

.record-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.time-section {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.checkin-time, .checkout-time {
  font-size: 28rpx;
  color: #333;
}

.duration {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.empty-state {
  text-align: center;
  padding: 100rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style>